Ext.onReady( function() {

	Ext.translate.Manager.Init( {
					  URL : '../TranslateServlet',
		languageImagesURL : '../img/flags/',
		autocreateIonsCSS : true,
				 autoload : true,
	 		  cookieReset : true
	});

	Ext.QuickTips.init();

	var reader = new Ext.data.JsonReader( {
			  totalProperty : 'total',
			successProperty : 'success',
			     idProperty : 'key',
			           root : 'data'
		}, 
		[{name : 'id'}, {name : 'key',allowBlank : false}, {name : 'value',	allowBlank : false}]
	);

	// The new DataWriter component.
	var writer = new Ext.data.JsonWriter({
	    encode: true,
	    writeAllFields: false
	});
	
	// create the Data Store
		var store = new Ext.ux.data.PagingStore( {
		//var store = new Ext.data.Store( {
			id : 'transstore',
			autoLoad : true,
			autoSave : false,
			//'proxy' : proxy,
			url : Ext.translate.URL,
			baseParams : {
				  action : Ext.translate.action[1],
				 xaction : 'read',
				language : Ext.translate.currentLanguage
			},
			'reader' : reader,
			'writer' : writer,
			listeners : {
				beforewrite : function(dataProxy, action, rs, options, arg) {
					//this.writer.meta.root = this.reader.meta.root;
				},
				write : function(store, action, result, res, rs) {
					Ext.Msg.show( {title : 'Info',msg : res.success ? 'Request ' + action + ' successful!' : res.msg, buttons : Ext.Msg.OK});
				},
				exception : function(proxy, type, action, options, res, arg) {
					if (type === 'remote') {
						Ext.Msg.show( {
							title : 'REMOTE EXCEPTION',
							  msg : res.msg,
							 icon : Ext.MessageBox.ERROR,
						  buttons : Ext.Msg.OK
						});
					}
				}
			}
		});
		
	    var getAlphaItems = function (callback){	    	
	    	var alphaTbarItems = new Array();	    	
	    	for(var i = 65; i < 91; i++) { 
	    	    var myChar = String.fromCharCode(i); // get the letter from the char code
	    	    alphaTbarItems.push({ 
	    	    			 id : 'alphaTbarItem' + myChar,	    	    	
	    	               text : myChar, 
	    	            handler : callback,
		    	    isTranslate : false	    	            
	    	    });
	    	    alphaTbarItems.push("-"); 
	    	} 
	    	return alphaTbarItems;
	    };		
	    
		// create the editor grid
		var grid = new Ext.translate.ConfigGrid({
			'store' : store,
			frame : true,			
			//local grid search, uses regex 
			plugins : [ new Ext.ux.grid.Search( {
						  iconCls : 'icon-zoom',
		 		  readonlyIndexes : [ 'key' ],
						     mode : 'local',
						 minChars : 1,
						autoFocus : true
					// ,menuStyle:'radio'
					}) ],
                      
			//local paging 
			bbar : new Ext.PagingToolbar( {
						pageSize : 25,
						   store : store,
					  isplayInfo : true,
						emptyMsg : "No results to display"
					}),			

			filterHandler  : function(obj,evnt){
					this.plugins[0].field.setValue('^' + obj.text);
					this.plugins[0].onTriggerSearch();
				},
			listeners : {
				render : function() {
	    	
		 	   var tbar2 = new Ext.Toolbar({
		 		      renderTo: this.bbar,
		 		      items:  getAlphaItems(this.filterHandler.createDelegate(this))
		 		      });
	
					this.syncSize();
				}
			}
		});


		win = new Ext.Panel( {
			  title : 'Edit translations',
			iconCls : 'silk-grid',
		   renderTo : Ext.getBody(),
			 layout : 'fit',
			/**
			 width : 900,
			height : 400,
			plain : true,
			 */
			 items : grid
		});

		new Ext.Viewport({
		    layout : 'fit',
		     items : [win]
		});


		grid.selector.on('select', function(){
			this.plugins[0].field.setValue('');
			this.plugins[0].onTriggerSearch();			
		},grid);		
	});